<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小车远程控制</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <script  type="text/javascript" src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-2" style="height: 150px; display: flex; flex-direction: column; justify-content: space-between; align-items:center">
                <button type="button" class="btn btn-primary" style="width: 40%" id="forward">前进</button>
                 <div style="display: flex; flex-direction: row; justify-content: space-between;">
                     <button type="button" class="btn btn-primary" id="left">左转</button>
                     <button type="button" class="btn btn-primary" id="stop">暂停</button>
                     <button type="button" class="btn btn-primary" id="right">右转</button>
                 </div>
                <button type="button" class="btn btn-primary" style="width: 40%" id="backward">后退</button>
            </div>
            <div class="col-xs-6" style="height: 150px; border: 1px solid red">
            </div>
            <div class="col-xs-3" style="height: 150px; border: 1px solid red">
            </div>
        </div>
    </div>
</body>
<script>
     $("button").unbind("click").click(function ()
     {
         $.ajax({
            type:'GET',
            data: {
                "action": $(this).attr("id"),
            },
            async: false,
            url:"/remoteCar",
            success: function(rsp) {
                console.log(rsp)
                if (rsp.status === "success") {
                }
                else {
                }
                return false;
            },
            error: function () {
            }
        });
     })
</script>
</html>